<script setup>
import { computed } from 'vue'

const props = defineProps({
  content: {
    type: String,
    required: true
  },
  position: {
    type: String,
    default: 'top',
    validator: (value) => {
      return ['top', 'bottom', 'left', 'right'].includes(value)
    }
  },
  align: {
    type: String,
    default: 'center',
    validator: (value) => {
      return ['left', 'center', 'right'].includes(value)
    }
  }
})

const positionClass = computed(() => {
  const baseClass = 'absolute whitespace-nowrap text-xs text-[--text-0] bg-[#00000090] p-2 rounded-[4px] z-50'
  const positionMap = {
    top: 'bottom-full mb-2',
    bottom: 'top-full mt-2',
    left: 'right-full mr-2',
    right: 'left-full ml-2'
  }
  const alignMap = {
    left: 'left-0',
    center: 'left-[50%] translate-x-[-50%]',
    right: 'right-0'
  }

  return `${baseClass} ${positionMap[props.position]} ${alignMap[props.align]}`
})
</script>

<template>
  <div class="relative group">
    <slot></slot>
    <div :class="positionClass" class="opacity-0 group-hover:opacity-100 transition-opacity">
      {{ content }}
    </div>
  </div>
</template>